<template>
	<view class="tower-swiper">
		<view class="tower-item" @click.prevent.stop  @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd" :data-item="item" :class="item.zIndex == 1 ? 'none' : ''" v-for="(item, index) in swiperList" :key="index"
		 :style="[{'height':upx2px(iHeight),'width':upx2px(iWidth), '--index':item.zIndex,'transform':transform(item.zIndex),'left':toLeft(item.mLeft), '--left': item.mLeft }]"
		 :data-direction="direction">
			<!-- <view class="swiper-item"><image :src="item.url" mode="aspectFill" v-if="item.type == 'image'"></image></view> -->
			<view class="swiper-item" style="overflow:visible">
				<slot :item="item"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showCount: {
				type: Number,
				default: 3
			},
			scale: {
				type: Number,
				default: 15
			},
			padding: {
				type: Number,
				default: 150
			},
			totalWidth: {
				type: Number,
				default: 750
			},
			iWidth: { //item 宽度
				type: Number,
				default: 350
			},
			iHeight: { //item 高度
				type: Number,
				default: 500
			},
			swiperList: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				towerStart: 0,
				direction: '',
				maxIndex: 0,
			};
		},
		created: function(e) {
			this.TowerSwiper('swiperList');
		},

		watch: {
			swiperList(val) {
				this.TowerSwiper('swiperList')
			}
		},
		methods: {
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2));
					// list[i].zIndex = 1;
					list[i].index = i;
					list[i].mLeft = i - parseInt(list.length / 2);
				}
				this.swiperList = list;
				this.maxIndex = parseInt(list.length / 2) + 1;
				// this.maxIndex = 0;
				// console.log("this.maxIndex------------------->",this.maxIndex);
				// console.log("this.maxIndex【】------------------->",list[this.maxIndex-1]);
			},
		// towerSwiper触摸开始
		TowerStart(e) {
			this.towerStart = e.touches[0].pageX;
			this.towerEnd = e.touches[0].pageY;
			console.log(e);
		},

		// towerSwiper计算方向
		TowerMove(e) {
			
			    //获取滑动屏幕时的X,Y
			   var endX =  e.changedTouches[0].pageX;
			   var endY =  e.changedTouches[0].pageY;
			    //获取滑动距离
			   var distanceX = endX-this.towerStart;
			   var distanceY = endY-this.towerEnd;
			    //判断滑动方向
			    if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){
			        console.log('往右滑动');
					this.isflag = 'toRight';
			    }else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){
			        console.log('往左滑动');
					this.isflag = 'toLeft';
			    }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){
			        console.log('往上滑动');
					this.isflag = 'toUp';
			    }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){
			        console.log('往下滑动');
					this.isflag = 'toDown';
			    }else{
			        console.log('点击未滑动');
					this.isflag = '';
			    }
			 
			
			this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left';
		},
		Touch(){
			this.isflag = 'toUp'
		},
		// towerSwiper计算滚动
		TowerEnd(e) {
			console.log("this.flag------------->",this.isflag)
			let direction = this.direction;
			let list = this.swiperList;
			let item = e.currentTarget.dataset.item;
			let temp = '';
			if(this.isflag != 'toUp' && this.isflag != 'toDown' ){
			
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft;
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex;
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				
					temp = item.index == 0 ? this.swiperList[list.length - 1] : this.swiperList[item.index - 1]
					console.log("temp----------------------->",temp);
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft;
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex;
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
			
						temp = item.index == list.length - 1 ? this.swiperList[0] : this.swiperList[item.index + 1]
					console.log("temp----------------------->",temp);
				}
				this.direction = '';
				temp.isEnd = true;
				// this.swiperList = this.swiperList;\
				
				
			}
			this.$emit('touchend',temp)
			// this.isflag = 'toUp';
		}
			,
			upx2px(udp) {
				return uni.upx2px(udp) + 'px';
			},
			transform(index) {
				let scale = 1;
				let n = this.maxIndex - index;
				// console.log(n,(this.showCount-1)/2)
				if (n > (this.showCount - 1) / 2) {
					scale = 0;
				} else {
					scale = scale - n * (this.scale / 100)
				}
				// console.log(scale)
				return "scale(" + scale + ")";
			},
			toLeft(left) {
				let margin = 0;
				if (left == 0) {
					margin = uni.upx2px(this.totalWidth) / 2 - uni.upx2px(this.iWidth) / 2;
				} else if (left < 0) {
					margin = uni.upx2px(this.totalWidth) / 2 - uni.upx2px(this.iWidth) / 2;
					margin = margin - Math.abs(left) * (uni.upx2px(this.iWidth) - uni.upx2px(this.padding));
				} else if (left > 0) {
					margin = uni.upx2px(this.totalWidth) / 2 + uni.upx2px(this.iWidth) / 2;

					margin = margin - uni.upx2px(this.padding) + (left - 1) * (uni.upx2px(this.iWidth) - uni.upx2px(this.padding));
				}
				// console.log(margin)
				return margin + "px"
			}
		}
	};
</script>

<style scoped>
	.tower-swiper {
		height: 100%;
		position: relative;
		max-width: 750upx;
		/* 	overflow: hidden; */
	}

	.tower-swiper .tower-item {
		/* left: 0upx; */
		/* margin-left: calc(var(--left) * 220upx - 150upx); */
		z-index: var(--index);
	}
</style>
